<!-- 实体门店结算信息 -->
<template>
	<view>
		<!-- 步骤条 -->
		<view class="step">
			<uni-steps :options="option" :active="3" active-color="#00C6C2"></uni-steps> 
		</view>
		<!-- 结算信息 -->
		<view class="settlement">
			结算信息
		</view>
		<!-- 结算方式 -->
		<view class="methodss">
			<view class="methodss_text1">结算方式</view>
			<view class="methodss_text2">
				<text>银行卡</text>
			</view>
		</view>
		<!-- //开户类型 -->
		<view class="sing_type">
			<view class="type_text1">开户类型</view>
			<view class="type_text2">
				<view v-for="(item,index) in tb" :key='index' :class="{type_text3:true,active:active_index ==index}" @click="choose_type(index)">{{item}}</view>
		
			</view>
		</view>
		<!-- 信息填写 -->
		<view class="inforPull">
			<view class="message" v-if="active_index==0">
				<view class="name">开户名称</view>
				<view class="Input">
					<input type="text" placeholder="请输入开户姓名" v-model="form.name">
					<view style="font-size: 18rpx;font-family: PingFang SC;font-weight: 400;color: #797979;">注：开户名称必须与“经营者证件姓名”一致。</view>
				</view>
			</view>
			<view class="message" v-if="active_index ==1">
				<view class="name">开户名称</view>
				<view class="Input">
					<input type="text" placeholder="请输对公银行名称" v-model="form.name">
					<view style="font-size: 18rpx;font-family: PingFang SC;font-weight: 400;color: #797979;">注：开户名称必须与营业执照上的“商户名称”一致。。</view>
				</view>
			</view>
			
			<view class="message">
				<view class="name">开户银行</view>
				<view class="Input">
					<view class="xx">
						<picker  @change="examinationType" :range="examinationTypeArray">
							<view>{{examinationTypeArrayType}}</view>
						</picker>
					</view>
					
					
				</view>
			</view>
			<view class="message">
				<view class="name">开户银行全称
				<view style="font-size: 18rpx;font-family: PingFang SC;font-weight: 400;color: #282828;">（仅支行）</view></view>
				<view class="Input">
					<input type="text" placeholder="选择开户支行" v-model="form.blank_name">
					<view style="font-size: 18rpx;font-family: PingFang SC;font-weight: 400;color: #797979;">例：中国招商银行XX省（市）分行XX支行</view>
				</view>
			</view>
			<view class="message">
				<view class="name">开户银行省市
				</view>
				<view class="Input">
					<input type="text" placeholder="开户城市编码  例：110000" v-model="form.city_code">
				</view>
			</view>
			<view class="message" v-if="active_index==0">
				<view class="name">开户银行帐号
				<view style="font-size: 18rpx;font-family: PingFang SC;font-weight: 400;color: #282828;">（仅支持储蓄卡）</view></view>
				<view class="Input">
					<input type="text" placeholder="请输入你的银行卡号" v-model="form.id_code">
				</view>
			</view>
			<view class="message" v-if="active_index==1">
				<view class="name">开户银行帐号
				<view style="font-size: 18rpx;font-family: PingFang SC;font-weight: 400;color: #282828;">（仅支持储蓄卡）</view></view>
				<view class="Input">
					<input type="text" placeholder="请输入你的对公银行账号" v-model="form.id_code">
				</view>
			</view>
			<view class="veri-2" >
				<view class="back" @click="backs">上一步</view>
				<view @click="gotos">提交审核资料</view>
			</view>
		</view>
		
	</view>
</template>

<script >
	export default {
		data(){
			return{
				option:[{title:'身份认证'},{title:'职业认证'},{title:'合作协议'},{title:'结算信息'}],
				examinationTypeArray:['招商银行'],
				examinationTypeArrayType:'选择开户银行  例：招商银行',
				form:{
					name:'',//户主姓名
					id_code:'',//银行卡号
					city_code:'',//城市编码
					blank_name:''//开户行信息
				},
				tb:['个人账户','对公账户'],
				active_index:0
			}
		},
		methods:{
			//银行选择
			examinationType(e) {
			   this.examinationTypeIndex = e.target.value;
			   this.examinationTypeArrayType=this.examinationTypeArray[this.examinationTypeIndex]
							},
			//下一步
			gotos(){
				this.form.blank_infor = this.examinationTypeArrayType
				//验证是否选择了银行卡类型
				if(this.form.blank_infor=='选择开户银行  例：招商银行'){
					uni.showToast({
						title:'请核实信息后再提交',
						icon:'none'
					})
					return
				}
				//验证城市代码
				  
					let text1 = /^\d{6}$/
					let str1 = this.form.city_code
					if(!text1.test(str1)){
						uni.showToast({
									title:'城市代码有误',
									icon:'none'
													})
						return;
					}
				//验证银行卡号
				let pattern = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/;
				 let  str = this.form.id_code.replace(/\s+/g, "");
				       if (!pattern.test(str)) {
							uni.showToast({
								title:'您输入的银行卡号有误',
								icon:'none'
							})
				           return;
				        }
				
				//判断是否输入
				for(let key in this.form){
					
					if(this.form[key]==''){
						uni.showToast({
							title:'请核实信息后再提交',
							icon:'none'
						})
						return
					}
				}
				//输入没有问题进入下一步
				uni.navigateTo({
					url:''
				})
			},
			//上一步{}
			backs(){
				uni.navigateBack({
				    delta: 1
				});
			},
			//切换账户类型
			choose_type(index){
				this.active_index = index
			}
		}
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style scoped lang="less">
	//步骤
	.step{
		padding: 47rpx 25rpx;
		background-color: white;
		margin-bottom: 14rpx;
	}
	//结算信息
	.settlement{
		background: white;
		margin-top: 14rpx;
		padding: 30rpx 25rpx;
		
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #282828;
	}
	//结算方式
	.methodss{
		padding: 21rpx 25rpx;
		background: #F3F3F3;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		.methodss_text1{
			margin-right: 93rpx;
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #282828;
		}
		.methodss_text2{
			width: 121rpx;
			height: 44rpx;
			background: #00C6C2;
			border: 1rpx solid #00C6C2;
			border-radius: 4rpx;
			text-align: center;
			line-height: 33rpx;
			text{
				opacity: 0.8;
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #F5F5F5;
			}
		}
	}
	//信息填写
	.inforPull{
		// 
		background: white;
		.message{
			// width: 100%;
			padding: 31rpx 26rpx;
			border-bottom: 1rpx solid #E2E2E2;
			display: flex;
			align-items: center;
			.name{
				width: 180rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}
			.Input{
				
				flex: auto;
				.xx{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
					
				}
				input{
					
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
				}
			}
		}
		.btm-ver{
			padding: 20rpx;
			color: #666;
			background-color:#F1F1F1;
			font-size: 24rpx;
		}
		.veri{
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.veri-1{
				width: 20%;
				display: flex;
				align-items: center;
				
				image{
					width: 10rpx;
					height: 20rpx;
					margin-left: 15rpx;
				}
			}
		}
		.tos{
			display: flex;
			justify-content: center;
			padding-top: 39rpx;
			background: #F3F3F3;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6F6F6F;
			padding-bottom: 80rpx;
		}
		.veri-2{
			padding: 30rpx;
			background-color: #F1F1F1;
			display: flex;
			padding-top: 140rpx;
			padding-bottom: 204rpx;
			.back{
				background: #F3F3F3;
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #414141;
				border: 1rpx solid #414141;
				border-radius: 4rpx 0px 0rpx 4px;
			}
			view{
				width: 100%;
				background-color:#00c6c2;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
	//开户类型
	.sing_type{
		display: flex;
		align-items: center;
		padding: 41rpx 24rpx;
		background: white;
		border-bottom: 1rpx solid #E2E2E2;
		.type_text1{
			width: 160rpx;			
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #282828;
		}
		.type_text2{
			flex: auto;
			display: flex;
		}
		.active{
		
			background: #00C6C2;
			color: white!important;
		}
		.type_text3{
			width: 124rpx;
			height: 44rpx;
			border: 1px solid #A3A3A3;
			border-radius: 4rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #414141;
			line-height: 44rpx;
			margin-right: 55rpx;
		}
	}

</style>
